<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="root">
        <div>
            <form action="" @submit.prevent="demo"><!--prevent 不提交信息-->
                账号:<input type="text" v-model.trim="account"><br><!--v-model.trim去掉空格-->
                密码:<input type="text" v-model="password"><br>
                年龄:<input type="number" v-model.number="age"><br><!--v-model.number转化为int类型-->
                性别:
                男<input type="radio" name="sex" value="man" v-model="sex">
                女<input type="radio" name="sex" value="female" v-model="sex">
                <br>
                爱好:
                学习<input type="checkbox" value="study" v-model="hobby">
                打游戏<input type="checkbox" value="game" v-model="hobby">
                吃饭<input type="checkbox" value="eat" v-model="hobby">
                <br>
                <select name="" id="" v-model="city">
                    <option value="">请选择校区</option>
                    <option value="beijing">北京</option>
                    <option value="nanjing">南京</option>
                    <option value="shanghai">上海</option>
                    <option value="guangzhou">广州</option>
                </select>
                <br>
                其他信息:
                <textarea v-model.lazy="other"></textarea><!--v-model.lazy最后获取字符-->
                <br>
                <input type="checkbox" v-model="agree">阅读并接受<a href="http://www.baidu.com">《用户协议》</a>
                <br>
                <button >
                    提交
                </button>

            </form>

        </div>
    </div>
    <script src="../js/vue.js"></script>
    <script>
            Vue.config.productionTip=false//阻止vue启动时产生提示
            new Vue({
                 el: "#root",
                 data:{//数据
                     account:'',
                     password:'',
                     age:'',
                     sex:'',
                     hobby:[],
                     city:'',
                     other:'',
                     agree:''
                    },
                 methods:{//方法
                    demo(){
                        console.log(this.account);
                        console.log(this.password);
                        console.log(this.sex);
                        console.log(this.hobby);
                        console.log(this.city);
                        console.log(this.other);
                        console.log(this.agree);
                    }
                 },
                 computed:{//计算

                 },
                 watch:{//监视

                 }
             })
    </script>
</body>
</html>